<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/img/favicon.ico}" type="image/x-icon"/>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/laydate/laydate.js}"></script>
    <style type="text/css">
        #birthday {
            padding-right: 0;
            height: 32px;
            line-height: 32px;
        }
    </style>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li><a th:href="@{/sys/users/userall}">系统管理</a></li>
        <li><a th:href="@{/sys/users/userall}">用户管理</a></li>
        <li><a href="#">修改</a></li>
    </ul>
</div>
<div class="formbody">
    <form th:action="@{/sys/users/doUpdate}" method="post">
    <div class="formtitle"><span>员工信息</span></div>
    <ul class="forminfo">
            <input name="uId" type="hidden" th:value="${user.uId}" class="dfinput"/>
        <li>
            <label>员工姓名</label>
            <input name="uname" type="text"  class="dfinput" th:value="${user.uname}" />
            <i>必填，不能超过30个字符</i>
        </li>
        <li>
            <label>密码</label>
            <input name="upassword" type="text" class="dfinput" th:value="${user.upassword}" />
            <i>必填，不能超过30个字符</i>
        </li>
        <li>
            <label>性别</label>
            <cite>
                <input name="sex" type="radio" value="1" checked="checked"/>男
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input name="sex" type="radio" value="2"/>女
            </cite>
        </li>
        <li>
            <label>联系方式</label>
            <input name="utelephone" type="text" th:value="${user.utelephone}" class="dfinput"/>
            <i>必填，不能超过30个字符</i>
        </li>
        <li>
            <label>出生年月</label>
            <input name="birthday" class="dfinput laydate-icon" th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}" id="birthday">
        </li>
        <li>
            <label>所属部门</label>
            <select name="deptId" class="dfselect" onchange="getjobs(this.value)">
                <option value="">请选择部门</option>
                <option th:each="d:${session.depts}"
                        th:value="${d.deptId}" th:selected="${d.deptId==user.deptId}" th:text="${d.deptName}"
                >研发</option>
            </select>
        </li>
        <li>
            <label>职位</label>
            <select name="jobId" class="dfselect">
                <option th:text="${user.job.jobName}"  th:value="${user.job.jobId}">请选择</option>
            </select>
        </li>
        <li>
            <label>状态</label>
            <select name="statusId" class="dfselect">
                <option value="0">请选择</option>
                <option value="1" th:selected="${user.statusId==1}?'true':'false'">在职</option>
                <option value="2" th:selected="${user.statusId==2}?'true':'false'">离职</option>
            </select>
        </li>
        <li>
            <label>&nbsp;</label>
            <input name="" type="submit" class="btn" value="确认保存"/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="" type="button" class="btn" value="返回" onclick="window.history.go(-1);"/>
        </li>
    </ul>
    </form>
</div>
<script type="text/javascript">
    //执行一个laydate实例
    laydate.render({
        elem: '#birthday' //指定元素
    });

    //域内容发生变化的事件
    function getjobs(num) {
        // alert(num);
        //异步请求
        $.get("/erp1/ajaxJobs",{"did":num},function (data) {
            // JSON.parse(data);  data--->object

            console.log(data);
            console.log(typeof data);

            $("select[name=jobId]").html("");
            //清空内容
            var options="<option value=''>请选择职位</option>";
            $.each(data,function (i,e) {
                options+="<option value='"+e.jobId+"'>"+e.jobName+"</option>";
            });
            $("select[name=jobId]").append(options);
        },"json");
    }
</script>
</body>
</html>
